<template>
	<div>数量：{{ count }}<button @click="count++">增加</button></div>
	<!-- <div>
		<div class="search_box">
			<el-form
				:inline="true"
				:model="selectData"
				class="demo-form-inline"
			>
				<el-form-item label="姓名">
					<el-input
						v-model="selectData.userName"
						placeholder="请输入姓名"
						clearable
					/>
				</el-form-item>
				<el-form-item label="角色">
					<el-select
						v-model="selectData.role"
						placeholder="Activity zone"
						clearable
						style="width: 200px"
					>
						<el-option label="全部" :value="0"></el-option>
						<el-option
							v-for="item in roleList"
							:key="item.roleId"
							:label="item.roleName"
							:value="item.roleId"
						/>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="onSearch">查询</el-button>
				</el-form-item>
			</el-form>
		</div>
		<el-table :data="list" border style="width: 100%">
			<el-table-column prop="id" label="ID" width="180" />
			<el-table-column prop="userName" label="姓名" width="180" />
			<el-table-column prop="role" label="角色"
				><template #default="scope">
					<el-button
						v-for="item in scope.row.role"
						:key="item.role"
						:label="item.roleName"
						:value="item.role"
						link
					>
						{{ item.roleName }}
					</el-button>
				</template>
			</el-table-column>
			<el-table-column label="操作">
				<template #default="scope">
					<el-button
						size="small"
						type="primary"
						@click="handleEdit(scope.row)"
					>
						编辑
					</el-button>
				</template>
			</el-table-column>
		</el-table>

		<el-dialog v-model="dialogFormVisible" title="编辑" width="500">
			<el-form :model="editForm">
				<el-form-item label="姓名" :label-width="50">
					<el-input v-model="editForm.userName" autocomplete="off" />
				</el-form-item>
				<el-form-item label="角色" :label-width="50">
					<el-select
						multiple
						v-model="editForm.role"
						placeholder="请选择角色"
					>
						<el-option
							v-for="item in roleList"
							:key="item.roleId"
							:label="item.roleName"
							:value="item.roleId"
						/>
					</el-select>
				</el-form-item>
			</el-form>
			<template #footer>
				<div class="dialog-footer">
					<el-button @click="dialogFormVisible = false"
						>取消</el-button
					>
					<el-button type="primary" @click="update"> 确定 </el-button>
				</div>
			</template>
		</el-dialog>
	</div> -->
</template>

<script lang="ts" setup>
import {
	defineComponent,
	toRefs,
	ref,
	computed,
	reactive,
	watch,
	onMounted,
	onUnmounted,
	onActivated,
	onDeactivated,
	defineOptions,
} from 'vue'

import { getUserList, getRolesList } from '../request/api'
import { initData, ListInt } from '../type/users'

defineOptions({
	name: 'UserView',
})
let count = ref(0)

onActivated(() => {
	console.log('onActivated22')
})

onDeactivated(() => {
	console.log('onDeactivated22')
})

onMounted(() => {
	console.log('onMounted22')
})

onUnmounted(() => {
	console.log('onUnmounted22')
})

// export default defineComponent({
// 	setup() {
// 		const roleData = reactive([
// 			{
// 				roleName: '管理员',
// 				roleId: 1,
// 				authority: [1, 2, 3, 4, 5, 6, 7, 9], // 权限
// 			},
// 			{
// 				roleName: '普通用户',
// 				roleId: 2,
// 				authority: [1, 2, 3, 4], // 权限
// 			},
// 		])

// 		const userData = reactive([
// 			{
// 				id: 1,
// 				userName: '小明1',
// 				role: [{ role: 1, roleName: '管理员' }],
// 			},
// 			{
// 				id: 2,
// 				userName: '小红1',
// 				role: [
// 					{ role: 1, roleName: '管理员' },
// 					{ role: 2, roleName: '普通用户' },
// 				],
// 			},
// 		])

// 		const data = reactive(new initData())
// 		data.list = userData
// 		data.roleList = roleData

// 		const sourceData = userData

// 		const getUsers = () => {
// 			// getUserList().then((res) => {})
// 		}
// 		onMounted(() => {
// 			// getUsers()
// 		})

// 		const onSearch = () => {
// 			let arr: ListInt[] = [] // 定义数组，用来接收查询后要展示数据
// 			if (data.selectData.userName || data.selectData.role) {
// 				if (data.selectData.userName) {
// 					arr = data.list.filter((item) => {
// 						return (
// 							item.userName.indexOf(data.selectData.userName) !==
// 							-1
// 						)
// 					})
// 				}
// 				if (data.selectData.role) {
// 					arr = (data.selectData.userName ? arr : sourceData).filter(
// 						(item) => {
// 							// find()找到第一个符合条件的元素就会停止搜索
// 							return item.role.find(
// 								(ele) => ele.role === data.selectData.role
// 							)
// 						}
// 					)
// 				}
// 			} else {
// 				arr = sourceData
// 			}
// 			data.list = arr
// 		}

// 		// 监听两个属性的变化
// 		watch(
// 			[() => data.selectData.userName, () => data.selectData.role],
// 			(newVal, oldVal) => {
// 				if (newVal[0] == '' && newVal[1] == 0) {
// 					data.list = sourceData
// 				}
// 			}
// 		)

// 		const handleEdit = (row: ListInt) => {
// 			data.editForm = {
// 				id: row.id,
// 				role: row.role.map((item) => item.role),
// 				userName: row.userName,
// 			}
// 			data.dialogFormVisible = true
// 		}

// 		const update = () => {
// 			let obj: any = data.list.find((item) => item.id == data.editForm.id)
// 			obj.role = data.roleList.filter((item) =>
// 				data.editForm.role.includes(item.roleId)
// 			)
// 			obj.userName = data.editForm.userName
// 			userData.forEach((item, index) => {
// 				if (item.id == obj.id) userData[index] = obj
// 			})

// 			data.dialogFormVisible = false
// 		}
// 		return { ...toRefs(data), onSearch, handleEdit, update }
// 	},
// })
</script>

<style scoped></style>
